<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <nav>
        <ul class="menu">
            <li><a href="javascript:;">Home</a></li>
            <li><a href="javascript:;">Order Status</a></li>
            <li><a href="javascript:;">Tweets</a></li>
            <li><a href="javascript:;">Read Our History</a></li>
            <li><a href="javascript:;">Contant Us</a></li>
        </ul>
    </nav>
    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde
            natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
        <p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a
                href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
        <p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a
                href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
        <p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut
            consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
        <p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime
            <a href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
    </div>
    <script>
        const triggers = document.querySelectorAll('a')
        const highlight = document.createElement('span')
        highlight.classList.add('highlight')
        document.body.appendChild(highlight)

        function highlightLink(e) {
            e.preventDefault()
            const linkCoords = this.getBoundingClientRect()
            const coords = {
                width: linkCoords.width,
                height: linkCoords.height,
                top: linkCoords.top + window.scrollY,
                left: linkCoords.left + window.scrollX
            }
            highlight.style.width = `${coords.width}px`
            highlight.style.height = `${coords.height}px`
            highlight.style.transform = `translate(${coords.left}px,${coords.top}px)`
        }
        console.log(triggers)
        triggers.forEach(a => a.addEventListener('click', highlightLink))
        /* triggers.forEach(a => a.addEventListener('click', () => {
            e.preventDefault()
        })) */
    </script>
</body>

</html>